<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import { useCommonDictionary } from "@/hooks/useCommonDictionary";
import { getDataBySQLDesc } from "@/api/common";
import moment from "moment";
defineOptions({
  name: "Tracking"
});
const loading = ref(false);
const form = ref({
  action: "biz/reports/get_cg_qgzz",
  qgddjb: "",
  qgdzt: "",
  kssj: "",
  jssj: ""
});
const searchColumns: PlusColumn[] = [
  {
    label: "开始时间",
    prop: "kssj",
    labelWidth: 120,
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD 00:00:00",
      placeholder: "请选择开始时间"
    }
  },
  {
    label: "结束时间",
    prop: "jssj",
    labelWidth: 120,
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD 23:59:59",
      placeholder: "请选择结束时间"
    }
  }
];
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['请购批次', '已转采购批次']
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    },
  ],
  series: [
    {
      name: '请购批次',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value
        }
      },
      data: [
      ]
    },
    {
      name: '已转采购批次',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value
        }
      },
      data: [
      ]
    },

  ]
});
const getTableData = async () => {

  const { data, total } = await getDataBySQLDesc({
    ...form.value,
    pageindex: pagination.currentPage.toString(),
    pagesize: pagination.pageSize.toString()
  });
  if (data) {
    tableData.value = data
    pagination.total = total
    const chartData = data.filter(item => {
      return item["请购审核日期"] !== "合计"
    })
    option.value.xAxis[0].data = chartData.map((el, index) => {
      return el["请购审核日期"]
    })
    option.value.series[0].data = chartData.map(el => {
      return {
        name: el["请购审核日期"],
        value: el["已转采购批次"]
      }
    })
    option.value.series[1].data = chartData.map(el => {
      return {
        name: el["请购审核日期"],
        value: el["请购批次"]
      }
    })
  }

};
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const tableData = ref([
]);
const columns = ref([
  {
    prop: "请购审核日期",
    label: "请购审核日期"
  },
  {
    prop: "请购批次",
    label: "请购批次"
  },
  {
    prop: "已转采购批次",
    label: "已转采购批次"
  },
]);
const handleRest = () => {
  pagination.currentPage = 1;
  form.value.action = "biz/reports/get_cg_qgzz"
  getAllParams();
};
const handleChange = () => { };
const handleSearch = () => {
  getTableData()
};
const getAllParams = async () => {
  const { data: time } = await getDataBySQLDesc({
    action: "public/get_server_sysdate"
  });
  form.value.kssj = time[0]["本月开始时间"]
  form.value.jssj = time[0]["本月结束时间"]
  const { data: data1 } = await getDataBySQLDesc({
    action: "public/get_bi_sjfw",
    hsmc: "get_cg_qgzz"
  })
  data1.forEach(element => {
    form.value[element["参数编码"]] = element["参数值"];
  });
  getTableData()
}
onMounted(() => {
  getAllParams()
}) 
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-position="right" @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="table-card">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="tableData" :columns="columns" :pagination="pagination" @page-current-change="handleSearch" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}
</style>
